---
import Layout from "../layouts/Layout.astro";

import { LinearGradient, Label } from "@qwik/components/text";

import { CodeTabs } from '@qwik/components/codeTabs';

import { Features } from "@qwik/sections/feature"
import { Benefits } from "@qwik/sections/benefits";

import { FAQ } from "@react/faq"

const screenList = ["w-full", "h-auto"]
const flexCol = ["flex", "flex-col"]
const flexStart = ["flex", "flex-col", "justify-start", "items-center"]

const paddings = ["p-4"]
---

<Layout title="NativeLink Products">
   <div class="w-screen p-2 py-24 gap-3 bg-black overflow-hidden">
     <div class="gap-5 text-primary" class:list={[screenList, flexStart, paddings]}>
      <div class="gap-5 flex flex-col md:flex-row md:w-[1300px] md:items-center md:justify-center md:h-40">
        <LinearGradient
        text="Simulation infrastructure for testing before deployment"
        class="text-3xl md:text-6xl md:w-1/2"
        />
        <div class="flex flex-col gap-5 md:w-1/2">
          <span>NativeLink's architecture is built on Rust for stability and performance. It supports Unix-based operating systems and Windows, and it communicates using the Remote Execution protocol compatible with Bazel, Buck2, Goma, and Reclient.</span>
          <span>
            Our system powers over one billion requests per month, ensuring reliable and efficient operation for your production workloads.
          </span>

        </div>

      </div>

        <div class="relative w-full flex flex-col md:flex-row-reverse md:w-[1200px] md:pt-56 md:gap-20">

          <div class="z-0 absolute inset-0">
            <div class="w-96 md:w-3/4 md:h-[80svh] h-96 bg-primarybg rounded-full blur-3xl opacity-50 absolute top-28 -left-20 md:-left-96"></div>
          </div>
          <div class="z-0 absolute inset-0">
            <div class="w-96 h-96 md:w-[70svw] md:h-[80svh] bg-secondarybg rounded-full blur-3xl opacity-40 absolute top-64 md:top-96 -right-20 md:-right-[30vw]"></div>
          </div>

          <div class="z-10 pb-16 gap-5 w-full md:w-1/2 md:pr-16 md:justify-center" class:list={[screenList, flexCol, paddings]} >
            <LinearGradient
            text="Effortless Implementation"
            class="text-3xl"
            />
            <span>Kickstart NativeLink in 10 minutes with an open-source build cache and remote executor tailored for large code bases.</span>
          </div>

          <CodeTabs class="z-10 md:w-1/2"/>
        </div>

        <div class="w-full flex gap-5 pt-24 md:pt-56 flex-col md:flex-row md:w-[1200px] md:gap-5">
          <div class="z-10 flex flex-col gap-3 items-start justify-center">
            <LinearGradient
            text="Made with love in Rust"
            class="text-3xl"
            />
            <span>Reduce runtime errors, guarantee memory-safety without requiring garbage collection, & eliminate race conditions at any scale.
            </span>
          </div>

          <div class="z-10 flex flex-col items-start gap-3">
            <LinearGradient
            text="Built for production"
            class="text-3xl"
            />
            <span>Our system powers over one billion requests per month, making it a trusted solution for production workloads.
            </span>

          </div>

        </div>

        <Features />
        <Benefits />

        <div class="flex justify-center items-center flex-col">
          <div class="py-12 ">
            <Label text="FAQ" class="px-8"/>
          </div>
          <LinearGradient text="Frequently Asked Questions" class="text-3xl text-center w-full pl-2"/>
          <span class="p-2">
            Find answers to the most common questions about NativeLink, from implementation details to support options.
          </span>
          <FAQ client:visible/>
          <span class="text-[10px]">For more detailed information, you can refer to
            the <a class="text-white underline" href="/docs/introduction/setup">NativeLink documentation</a>.</span>
        </div>

     </div>
   </div>
</Layout>
